<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.css" />
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery.sorted.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <script type="text/javascript" src="js/ckform.js"></script>
    <script type="text/javascript" src="js/common.js"></script>
    <script type="text/javascript" src="js/showdate.js"></script>
    <script type="text/javascript" src="../js/contextPath.js"></script>
    <script>
        function checkOld(){
            var oldpassword= trim(document.getElementById("old").value);
//            var newpwd=trim(document.getElementById("new").value);
//            var surepwd=trim(document.getElementById("sure").value);
            var useridRegex= /^\w{6,12}$/;
            var msg="<font color='green'>√</font>";
            if (!oldpassword){
                msg ="<font color='red'>密码不能为空！</font>";
            }
            else if (!useridRegex.test(oldpassword)){
                msg ="<font color='red'>密码长度不对！</font>";
            }
            var span1 = document.getElementById("oldpass");
//            var span2=document.getElementById("newpwd");
//            var span3=document.getElementById("surepwd");
            span1.innerHTML = msg;
//            span2.innerHTML =msg;
        }
        function checkNew() {
            var newpwd=trim(document.getElementById("new").value);
            var useridRegex= /^\w{6,12}$/;
            var msg="<font color='green'>√</font>";
            if (!newpwd){
                msg ="<font color='red'>密码不能为空！</font>";
            }
            else if (!useridRegex.test(newpwd)){
                msg ="<font color='red'>密码长度不对！</font>";
            }
            var span2=document.getElementById("newpwd");
            span2.innerHTML=msg;
        }
        function checkSure() {
            var surepwd=trim(document.getElementById("sure").value);
            var newpwd=trim(document.getElementById("new").value);
            var msg="<font color='green'>√</font>";
            if (surepwd!=newpwd)msg="<font color='red'>密码与第一次输入不同，请重新输入</font>";
            var span3=document.getElementById("surepwd");
            span3.innerHTML = msg;
        }
        function trim(s){
            return s.replace(/^\s+|\s+$/g,"");
        }
    </script>
    <style type="text/css">
        body {font-size: 20px;
            padding-bottom: 40px;
            background-color:#e9e7ef;
            font-size:17px;
        }
        .sidebar-nav {
            padding: 9px 0;
        }

        @media (max-width: 980px) {
            /* Enable use of floated navbar text */
            .navbar-text.pull-right {
                float: none;
                padding-left: 5px;
                padding-right: 5px;
            }
        }
    </style>
</head>
<h1 class="mg-b20 text-center">密码修改</h1>
<table id="password" align="center">
    <tr>
        <td width="18%" height="30" >旧&nbsp;密&nbsp;码：</td>
        <td width="82%" class="word_grey"><input type="password"id="old" placeholder="输入旧密码" onblur="checkOld()"><span id="oldpass" style=" color:#F00">*6-12字母，数字组合</span></td>
    </tr>
    &nbsp;
    <tr >
        <td width="30%" height="30">新&nbsp;密&nbsp;码：</td>
        <td width="70%" class="word_grey" height="80px" ><input type="password"id="new" placeholder="输入新密码"onblur="checkNew()"><span id="newpwd" style=" color:#F00">*6-12字母，数字组合</span></td>
    </tr>
    &nbsp;
    <tr>
        <td width="18%" height="30" >确&nbsp;认&nbsp;密&nbsp;码</td>
        <td width="82%" class="word_grey"><input type="password" id="sure" placeholder="确认新密码"onblur="checkSure()"><span id="surepwd" style=" color:#F00">*6-12字母，数字组合</span></td>
    </tr>
    &nbsp;
    <tr align="center">
        <td>
            <button style="margin-left:5px;"id="btn" class="btn btn-primary">确&nbsp;定</button>
        </td>
        <td>
            <button style="margin-left:5px;"id="res" class="btn btn-primary">取&nbsp;消</button>
        </td>
    </tr>
</table>

</body>
</html>
<script type="text/javascript" src="js/password.js"></script>
